<template>
    <el-date-picker
        popper-class="currTime"
        prefix-icon="el-icon-date"
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="current"
        :type="type"
        :editable="false"
        clear-icon="el-icon-circle-close"
        :default-time="defaultTime"
        :picker-options="pickerOptions"
        :start-placeholder="startPlaceholder"
        range-separator="至"
        :end-placeholder="endPlaceholder"
        :size="size"
    >
    </el-date-picker>
</template>
<script>
// @ts-nocheck
import moment from 'moment'
import FormValid from './FormValid.js'
export default {
    mixins: [FormValid],
    props: {
        startValue: String,
        endValue: String,
        pickerOptions: Object,
        type: {
            type: String,
            default: 'datetimerange',
            validator(value) {
                return ['datetimerange', 'daterange'].includes(value)
            }
        },
        defaultTime: Array,
        startPlaceholder: {
            type: String,
            default: '开始时间'
        },
        endPlaceholder: {
            type: String,
            default: '结束时间'
        },
        size: String
    },
    computed: {
        current: {
            get() {
                if (this.startValue && this.endValue) {
                    return [new Date(this.startValue), new Date(this.endValue)]
                } else {
                    return []
                }
            },
            set(val) {
                let startValue, endValue
                if (val && val[0] && val[1]) {
                    startValue = moment(val[0]).format(`YYYY-MM-DD ${this.type === 'daterange' ? '00:00:00' : 'HH:mm:ss'}`)
                    endValue = moment(val[1]).format(`YYYY-MM-DD ${this.type === 'daterange' ? '23:59:59' : 'HH:mm:ss'}`)
                } else {
                    startValue = ''
                    endValue = ''
                }
                this.$emit('update:startValue', startValue)
                this.$emit('update:endValue', endValue)
                this._dispatch('ElFormItem', 'el.form.change', [[startValue, endValue]])
            }
        }
    }
}
</script>
<style lang="scss">
.currTime .el-date-range-picker__time-header {
  .el-date-range-picker__editors-wrap .el-date-range-picker__time-picker-wrap:nth-child(1)  {
    pointer-events: none;
  }
}
</style>
